<!-- src/components/BreadCrumb.vue -->
<template>
  <el-breadcrumb
    separator="/"
    class="breadcrumb"
    separator-class="el-icon-arrow-right"
  >
    <!-- :to="item.path" -->
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      <img
        v-if="item.icon"
        :src="item.icon"
        style="display: inline-block"
        class="breadcrumb-icon"
        alt="icon"
      />
      <!-- 图标（可选） -->
      <!-- <el-icon v-if="item.icon" :size="16" class="breadcrumb-icon">
        <component :is="item.icon" />
      </el-icon> -->
      <!-- 文字 -->
      <span class="breadcrumb-text">{{ item.label }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
// 1. 导入依赖
import { computed, defineProps } from "vue";
import { ElBreadcrumb, ElBreadcrumbItem } from "element-plus";

// 2. 导入公共菜单（与侧边栏统一）
import { menuList } from "@/utils/menuData";

// 3. 接收父组件传递的当前路由路径
const props = defineProps({
  currentPath: {
    type: String,
    required: true,
    default: "/home",
  },
});

/**
 * 递归查找当前路径的所有父级菜单
 * @param {string} targetPath - 目标路由路径（如：/basic/airport）
 * @param {Array} menuArr - 待遍历的菜单列表
 * @param {Array} result - 面包屑结果集（按层级顺序存储）
 * @returns {boolean} 是否找到目标路径（用于递归终止）
 */
const findBreadcrumb = (targetPath, menuArr, result = []) => {
  for (const menu of menuArr) {
    // 情况1：当前菜单就是目标路径 → 加入结果集
    if (menu.path === targetPath) {
      result.unshift({ ...menu }); // 从头部插入，保证层级顺序（父→子）

      return true;
    }

    // 情况2：当前菜单有子菜单 → 递归查找子菜单
    if (menu.children && menu.children.length > 0) {
      const isFound = findBreadcrumb(targetPath, menu.children, result);
      // 如果在子菜单中找到目标 → 当前菜单是父级，加入结果集
      if (isFound) {
        result.unshift({ ...menu });
        return true;
      }
    }
  }
  // 未找到目标路径
  return false;
};

// 4. 计算属性：动态生成面包屑列表
const breadcrumbList = computed(() => {
  const result = [];
  // 调用递归函数匹配路径
  findBreadcrumb(props.currentPath, menuList, result);
  // 兼容处理：若未匹配到（如404页面），默认显示首页
  return result.length
    ? result
    : [{ path: "/home", label: "首页", icon: menuList[0].icon }];
});
</script>

<style scoped lang="scss">
.breadcrumb {
  font-size: 14px;
  .breadcrumb-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    vertical-align: middle;
  }
  .breadcrumb-text {
    vertical-align: middle;
    font-weight: 700;
  }
  // 最后一级面包屑高亮
  // ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  //   color: #409eff;
  //   font-weight: 500;
  // }
}
.el-breadcrumb__separator {
  line-height: 19px;
}
</style>
